import React, { Component } from 'react'
import Header from './component/DefaultHeader'
import "../../asset/css/cart.css"
import {getCartNumber,cartDelete} from '../../request/cart_request'
export default class Cart extends Component {
    state = {
        carChecked: true
    }
    updateChecked(id){
        //修改每个商品的是否选择
        const index = this.props.CarList.findIndex(item=>item.id === id)
        const {checked} = this.props.CarList[index]
        this.props.CarList[index].checked = !checked
        //修改商品选择后，全选的状态
        const carChecked = this.props.CarList.every(item=>item.checked)
        this.setState({carChecked})
    }
    toggleCheckd(){
        const t_checked = !this.state.carChecked
        this.props.CarList.forEach(item=>{
            item.checked = t_checked
        })
        this.setState({carChecked:t_checked})
    }
    carCount(){
        var number = 0
        //过滤出所有选中的
        const list = this.props.CarList.filter(item=>{
           return item.checked
        })
        
        number = getCartNumber(list)
        return number
    }
    carPrice(){
        var price = 0
        //过滤出所有选中的
        const list = this.props.CarList.filter(item=>{
           return item.checked
        })
        list.forEach(item=>{
            const n_price = item.price*item.num
            price+=n_price
        })
        
        return price.toFixed(2)
    }
    del(id){
        // 删除数据
        cartDelete(id).then(res=>{
            if(res.code === 200){
                this.props.restCarList()
            }
            console.log(res)
        })
    }
    render() {
        const { CarList } = this.props
        const {carChecked} = this.state
        return (
            <div>
                <div className="cart-container">
                <Header title="购物车" />
                <ul className="cart-list">
                {
                        CarList.map(item => (
                            <li key={item.id}>
                                <input type="checkbox" checked={item.checked} onChange={()=>this.updateChecked(item.id)} />
                                <img src={this.$adress+item.img} alt="" />
                                <div className="info">
                                    <h5>{item.goodsname}</h5>
                                    <h5 className="price">
                                        &yen;{item.price}
                                        <span className="market-price">&yen; 49999</span>
                                    </h5>
                                </div>
                                <div className="options">
                                    <div className="stepper">
                                        <button>-</button>
                                        <span>{item.num}</span>
                                        <button>+</button>
                                    </div>
                                    <button className="btn-danger" onClick={()=>this.del(item.id)}>删除</button>
                                </div>
                            </li>

                        ))
                    }
                </ul>
                <div className="submit-bar">
                <label><input type="checkbox" checked={carChecked} onChange={()=>this.toggleCheckd()}/> 全选</label>
                    <div className="price">订单总金额: &yen; {this.carPrice()}</div>
                    <button className="btn-order">去结算({this.carCount()}件)</button>
                </div>
            </div>
            </div>
        )
    }
}
